<template>
  <div class="container">
    <div id="map"></div>
    <div class="header">
      <div class="timeBox">
        <span>{{ date }}</span>
        <span>{{ week }}</span>
        <span>{{ time }}</span>
      </div>
      <div class="info">
        <img src="../assets/images/天气，雨天，大雨@2x.png" alt="" />
        <img src="../assets/images/个人图标@2x.png" alt="" />
      </div>
    </div>
    <LeftBox v-show="activeIndex == 1"></LeftBox>
    <EconomyLeftBox v-show="activeIndex == 2"></EconomyLeftBox>
    <GovernmentLeftBox v-show="activeIndex == 3"></GovernmentLeftBox>
    <CoordinateLeftBox v-show="activeIndex == 4"></CoordinateLeftBox>
    <div class="tool">
      <el-popover  placement="right" popper-class="editpoper" width="400" trigger="click">
        <el-cascader-panel @change="selectChange" :options="options" ref="optval"></el-cascader-panel>
        <!-- <el-button slot="reference">click 激活</el-button> -->
        <img slot="reference" src="../assets/images/筛选@2x.png" alt=""></img>
      </el-popover>
      <el-popover placement="right" popper-class="editpoper" width="400" trigger="click">
        <el-cascader-panel @change="selectChange" :options="options1" ref="optval1"></el-cascader-panel>
        <!-- <el-button slot="reference">click 激活</el-button> -->
        <img slot="reference" src="../assets/images/极坐标热力图@2x.png" alt="" />
      </el-popover>
      <!-- <img src="../assets/images/筛选@2x.png" alt=""> -->
      <!-- <img src="../assets/images/极坐标热力图@2x.png" alt=""> -->
      <!-- <img src="../assets/images/地图-地标@2x.png" alt=""> -->

    </div>
    <RightBox v-show="activeIndex == 1"></RightBox>
    <EconomyRightBox v-show="activeIndex == 2"></EconomyRightBox>
    <GovernmentRightBox v-show="activeIndex == 3"></GovernmentRightBox>
    <CoordinateRightBox v-show="activeIndex == 4"></CoordinateRightBox>
    <div class="search-box">
      <select id="mySelect">
        <option class="blue">企业</option>

      </select>
      <span class="search">
        <input type="text" placeholder="请输入关键字搜索">
        <img src="../assets/images/搜索小@2x.png" alt="">
      </span>

    </div>
    <div class="btn">
      <ul class="btn-list">
        <li @click="changeArea('all')">综合总览</li>
        <li @click="activeChange(2)">经济指数</li>
        <li @click="activeChange(3)">政务规划</li>
        <li @click="activeChange(4)">协调治理</li>
        <!-- <li @click="changeArea('1')">片区1</li>
        <li @click="changeArea('2')">片区2</li>
        <li @click="changeArea('3')">片区3</li>
        <li @click="changeArea('4')">片区4</li>
        <li @click="changeArea('5')">片区5</li>
        <li @click="changeArea('6')">片区6</li> -->
      </ul>

    </div>
  </div>
</template>
<script type="text/ecmascript-6">
const mapboxgl = require('mapbox-gl');
import * as turf from '@turf/turf'
import LeftBox from '../components/LeftBox.vue'
import EconomyLeftBox from '../components/EconomyLeftBox.vue'
import GovernmentLeftBox from '../components/GovernmentLeftBox.vue'
import CoordinateLeftBox from '../components/CoordinateLeftBox.vue'
import RightBox from '../components/RightBox.vue'
import EconomyRightBox from '../components/EconomyRightBox.vue'
import GovernmentRightBox from '../components/GovernmentRightBox.vue'
import CoordinateRightBox from '../components/CoordinateRightBox.vue'

export default {
  name: 'mapboxgl',
  components: {
    LeftBox,
    RightBox,
    EconomyLeftBox,
    EconomyRightBox,
    GovernmentLeftBox,
    GovernmentRightBox,
    CoordinateLeftBox,
    CoordinateRightBox

  },
  data() {
    return {
      geoJSON: {
        // '1':[[116.4696522901989,31.680962424769646],
        //      [116.47410813743767,31.680551258088613],
        //      [116.47872503939658,31.68082536941162],
        //      [116.4797450526201,31.676850676019498],
        //      [116.47979873752598,31.664560030480615],
        //      [116.47405445253054,31.664605723624618],
        //      [116.4693301807597,31.665610967105337],
        //      [116.46664593543454,31.667027428092297],
        //      [116.46975966001077,31.673012879571758],
        //      [116.4696522901989,31.680962424769646]],

        //  '2':[[116.46775039696882,31.687043633426725],
        //       [116.4699870381977,31.68671794730642],
        //       [116.47052526736877,31.68479434035254],
        //       [116.46973370617457,31.68088851466203],
        //       [116.46969245804047,31.677106040851825],
        //       [116.46443905226977,31.677183122865884],
        //       [116.45972910226686,31.677240934334208],
        //       [116.45985484989689,31.681836815852705],
        //       [116.46074516583178,31.684239209107076],
        //       [116.46216596856954,31.685764288846784],
        //       [116.46629390571951,31.685358374413724],
        //       [116.46754062641833,31.68524246723554],
        //       [116.46775039696882,31.687043633426725]],

        //   '3':[[116.47401276990882,31.664610346482675],
        // [116.49156816650964,31.664610310671165],
        // [116.49161144877326,31.656900816143732],
        // [116.4855042412891,31.65685453189586],
        // [116.48541047057518,31.652586156180206],
        // [116.48397721542358,31.644391079491683],
        // [116.4819872336289,31.6386889833786],
        // [116.46802809142508,31.644009903263367],
        // [116.47191095158371,31.65328479304935],
        // [116.47401276990882,31.664610346482675]],

        // '4':[[116.45972539862134,31.677264441381027],
        // [116.46973832434713,31.677124946280628],
        // [116.46972048813063,31.67272646126554],
        // [116.46646261279881,31.667205225895117],
        // [116.4651112006286,31.668100791451366],
        // [116.45979498859214,31.668132536262263],
        // [116.45972539862134,31.677264441381027]],

        //'5':[[116.4664331257178,31.667178973494515],
        // [116.46945477658954,31.66575528203225],
        // [116.47202280460903,31.6648081652406],
        // [116.47411287514132,31.664564854842894],
        // [116.47357256920606,31.660953508671184],
        // [116.47182026457091,31.65319314351696],
        // [116.47090439867156,31.649547726479767],
        // [116.4679964961145,31.64392115516847],
        // [116.45752238095042,31.647981144286874],
        // [116.4582989182444,31.651717777783077],
        // [116.45898569711659,31.656146801125814],
        // [116.45980046885762,31.66028977693051],
        // [116.46033192040949,31.661660506148735],
        // [116.46370923170582,31.665087160370746],
        // [116.4664331257178,31.667178973494515]],

        //'6':[[116.47876669272438,31.680821126601828],
        // [116.4836693279799,31.68229569112141],
        // [116.48606613287251,31.678482100922835],
        // [116.4911785872468,31.669934553634278],
        // [116.49157222652383,31.6685926524613],
        // [116.49165462886731,31.66456464196814],
        // [116.47970732106899,31.664527347915765],
        // [116.47964562855685,31.677096125809953],
        // [116.47917723011648,31.67958055208443],
        // [116.47876669272438,31.680821126601828] ]

        '1': [[116.46446062212345, 31.68285670891376],
        [116.46883315739984, 31.682522001470858],
        [116.4737209127062, 31.682688232319734],
        [116.47446020920569, 31.678941925897732],
        [116.47450445981292, 31.666614896167772],
        [116.46884276077333, 31.666683234160857],
        [116.4652937700252, 31.667085930169208],
        [116.4613786726805, 31.66900054084094],
        [116.46446227895353, 31.674646059688897],
        [116.46446062212345, 31.68285670891376]],

        '2': [[116.46237476886449, 31.689092622864067],
        [116.46492873144928, 31.688819222055486],
        [116.46556351379814, 31.686517620549665],
        [116.46446062212345, 31.68285670891376],
        [116.46446339331447, 31.679001148717532],
        [116.45875834773153, 31.67900387087309],
        [116.4544552111189, 31.679037996717895],
        [116.45460299615303, 31.683800454014815],
        [116.45526134020935, 31.68577002979191],
        [116.45675989227499, 31.68746923282005],
        [116.46109922768778, 31.687348201317235],
        [116.46205595074508, 31.68725906606906],
        [116.46237476886449, 31.689092622864067]],

        '3': [[116.46884276077333, 31.666683234160857],
        [116.4864644418418, 31.66655423008234],
        [116.48651339243554, 31.658728507205723],
        [116.48026756838084, 31.658732884038827],
        [116.48017359172593, 31.65448556744842],
        [116.47881848224557, 31.646338240021336],
        [116.47681625219639, 31.640602294423545],
        [116.46277397000478, 31.645859369852204],
        [116.4657254872929, 31.651765055055733],
        [116.46671139784422, 31.65513880508081],
        [116.46884276077333, 31.666683234160857]],

        '4': [[116.4544552111189, 31.679037996717895],
        [116.45875834773153, 31.67900387087309],
        [116.46446339331447, 31.679001148717532],
        [116.46446227895353, 31.674646059688897],
        [116.4613786726805, 31.66900054084094],
        [116.45966285244924, 31.670171249445787],
        [116.45447342888724, 31.67030844135256],
        [116.4544552111189, 31.679037996717895]],

        '5': [[116.4613786726805, 31.66900054084094],
        [116.4652937700252, 31.667085930169208],
        [116.46884276077333, 31.666683234160857],
        [116.46671139784422, 31.65513880508081],
        [116.4657254872929, 31.651765055055733],
        [116.46277397000478, 31.645859369852204],
        [116.45221257479511, 31.649828372427535],
        [116.45361721068622, 31.65817954092006],
        [116.4546735984984, 31.6622590980556],
        [116.45511193006075, 31.66337912643411],
        [116.45836742076318, 31.66697513834562],
        [116.4613786726805, 31.66900054084094]],

        '6': [[116.4737209127062, 31.682688232319734],
        [116.4786138583666, 31.68431847376297],
        [116.48087067179364, 31.680504175398198],
        [116.48602594329486, 31.67207251114823],
        [116.48637848927785, 31.670826219538043],
        [116.4864644418418, 31.66655423008234],
        [116.47450445981292, 31.666614896167772],
        [116.47446020920569, 31.678941925897732],
        [116.4737209127062, 31.682688232319734]]
      },
      center: {},
      map: null,
      date: '',
      time: '',
      week: '',
      colorList: ['#6fadee', '#4f82b5', '#24578a', '#06427f', '#247f25', '#5fcecc'],
      options: [{
        value: '企业',
        label: '企业',

      },
      {
        value: '楼宇',
        label: '楼宇',

      },
      {
        value: '厂房',
        label: '厂房',

      },
      {
        value: '包保人',
        label: '包保人',

      },
      {
        value: '事件',
        label: '事件',
        children: [{
          value: '全部事件',
          label: '全部事件'
        }, {
          value: '事件状态',
          label: '事件状态',
          children: [
            {
              value: '完成事件',
              label: '完成事件'
            },
            {
              value: '未完成事件',
              label: '未完成事件'
            }
          ]
        }, {
          value: '事件预警',
          label: '事件预警'
        }]
      },
      {
        value: '公共设施设备',
        label: '公共设施设备',

      },
      {
        value: '土地属性',
        label: '土地属性',

      },
      {
        value: '重点区域',
        label: '重点区域',

      },
      {
        value: '特种车量',
        label: '特种车量',

      },
      {
        value: '无人车',
        label: '无人车',

      },
      {
        value: '道路交通',
        label: '道路交通',
        children: []
      }],
      optval:'',
      options1: [{
        value: '空气质量',
        label: '空气质量',

      },
      {
        value: '热力图',
        label: '热力图',
        children: [{
          value: '事件热力图',
          label: '事件热力图'
        }, {
          value: '人口热力图',
          label: '人口热力图'
        }, {
          value: '产业热力图',
          label: '产业热力图'
        }]
      },

      {
        value: '片区图层',
        label: '片区图层',
        children: [{
          value: '片区1',
          label: '片区1'
        }, {
          value: '片区2',
          label: '片区2'
        }, {
          value: '片区3',
          label: '片区3'
        }, {
          value: '片区4',
          label: '片区4'
        }, {
          value: '片区5',
          label: '片区5'
        }, {
          value: '片区6',
          label: '片区6'
        }]
      }
      ],
      optval1:'',
      activeIndex: 2,
      // heatMapGeo: {
      //   "type": "FeatureCollection",
      //   "features": [
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.4677503,
      //           31.6870436
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 3,
      //         "new_death": 0,
      //         "new_diagnosis": 0
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.46754,
      //           31.685242
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 0,
      //         "new_death": 0,
      //         "new_diagnosis": 5
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.4740127,
      //           31.664610
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 0,
      //         "new_death": 0,
      //         "new_diagnosis": 1
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.472022,
      //           31.664808
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 168,
      //         "new_death": 3,
      //         "new_diagnosis": 0
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.4787666,
      //           31.6808211
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 1,
      //         "new_death": 0,
      //         "new_diagnosis": 0
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.4677503,
      //           31.6870436
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 3,
      //         "new_death": 0,
      //         "new_diagnosis": 0
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.46754,
      //           31.685242
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 0,
      //         "new_death": 0,
      //         "new_diagnosis": 5
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.4740127,
      //           31.664610
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 0,
      //         "new_death": 0,
      //         "new_diagnosis": 1
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.472022,
      //           31.664808
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 168,
      //         "new_death": 3,
      //         "new_diagnosis": 0
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.4787666,
      //           31.6808211
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 1,
      //         "new_death": 0,
      //         "new_diagnosis": 0
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.4677503,
      //           31.6870436
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 3,
      //         "new_death": 0,
      //         "new_diagnosis": 0
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.46754,
      //           31.685242
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 0,
      //         "new_death": 0,
      //         "new_diagnosis": 5
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.4740127,
      //           31.664610
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 0,
      //         "new_death": 0,
      //         "new_diagnosis": 1
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.472022,
      //           31.664808
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 168,
      //         "new_death": 3,
      //         "new_diagnosis": 0
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.4327666,
      //           31.6808211
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 1,
      //         "new_death": 0,
      //         "new_diagnosis": 0
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.4327503,
      //           31.6560436
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 3,
      //         "new_death": 0,
      //         "new_diagnosis": 0
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.42354,
      //           31.623242
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 0,
      //         "new_death": 0,
      //         "new_diagnosis": 5
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.434127,
      //           31.66210
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 0,
      //         "new_death": 0,
      //         "new_diagnosis": 1
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.445022,
      //           31.623808
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 168,
      //         "new_death": 3,
      //         "new_diagnosis": 0
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.4567666,
      //           31.6238211
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 1,
      //         "new_death": 0,
      //         "new_diagnosis": 0
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.4897503,
      //           31.6230436
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 3,
      //         "new_death": 0,
      //         "new_diagnosis": 0
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.43454,
      //           31.667242
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 0,
      //         "new_death": 0,
      //         "new_diagnosis": 5
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.475440127,
      //           31.663410
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 0,
      //         "new_death": 0,
      //         "new_diagnosis": 1
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.476022,
      //           31.654808
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 168,
      //         "new_death": 3,
      //         "new_diagnosis": 0
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.4217666,
      //           31.6458211
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 1,
      //         "new_death": 0,
      //         "new_diagnosis": 0
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.4237503,
      //           31.660436
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 3,
      //         "new_death": 0,
      //         "new_diagnosis": 0
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.43454,
      //           31.632242
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 0,
      //         "new_death": 0,
      //         "new_diagnosis": 5
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.4560127,
      //           31.645610
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 0,
      //         "new_death": 0,
      //         "new_diagnosis": 1
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.434022,
      //           31.621808
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 168,
      //         "new_death": 3,
      //         "new_diagnosis": 0
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.4567666,
      //           31.6328211
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 1,
      //         "new_death": 0,
      //         "new_diagnosis": 0
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.4377503,
      //           31.6860436
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 3,
      //         "new_death": 0,
      //         "new_diagnosis": 0
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.36754,
      //           31.685242
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 0,
      //         "new_death": 0,
      //         "new_diagnosis": 5
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.4140127,
      //           31.624610
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 0,
      //         "new_death": 0,
      //         "new_diagnosis": 1
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.472022,
      //           31.624808
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 168,
      //         "new_death": 3,
      //         "new_diagnosis": 0
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.3787666,
      //           31.6808211
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 1,
      //         "new_death": 0,
      //         "new_diagnosis": 0
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.4677503,
      //           31.6370436
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 3,
      //         "new_death": 0,
      //         "new_diagnosis": 0
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.46754,
      //           31.615242
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 0,
      //         "new_death": 0,
      //         "new_diagnosis": 5
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.3740127,
      //           31.664610
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 0,
      //         "new_death": 0,
      //         "new_diagnosis": 1
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.472022,
      //           31.564808
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 168,
      //         "new_death": 3,
      //         "new_diagnosis": 0
      //       }
      //     },
      //     {
      //       "geometry": {
      //         "coordinates": [
      //           116.3787666,
      //           31.6808211
      //         ],
      //         "type": "Point"
      //       },
      //       "type": "Feature",
      //       "properties": {
      //         "new_recovery": 1,
      //         "new_death": 0,
      //         "new_diagnosis": 0
      //       }
      //     },
      //   ]
      // },
      currentMarkers: [],
      popup: null,
      routeGeoJson:[],
      currentPopup:[]
    }
  },
  mounted() {
    for (let item in this.geoJSON) {
      let polygon = turf.polygon([this.geoJSON[item]]);

      let centroid = turf.centroid(polygon);
      // console.log(centroid.geometry.coordinates)
      this.center[item] = centroid.geometry.coordinates
    }
    this.initmap();
    setInterval(() => {
      this.getNowDate()
    }, 1000);

  },
  methods: {
    //坐标撒点
    initmap() {
      mapboxgl.accessToken = 'pk.eyJ1Ijoia2IwMjA3MDgiLCJhIjoiY2w3cXo1aHVsMGFibTQyazJkZ3dvOTBnZSJ9.PnxyAP8u2XImn9hUFjNHww';
      this.map = new mapboxgl.Map({
        container: 'map', // container id 绑定的组件的id
        style: 'http://223.243.100.141:35931/yeshi_mapbox/Code/style.json', //地图样式，可以使用官网预定义的样式,也可以自定义
        // style:'mapbox://styles/mapbox/streets-v12',
        center: [116.47479873752598, 31.664560030480615], // 初始坐标系
        zoom: 12.5,     // starting zoom 地图初始的拉伸比例
        minzoom: 9,
      });

      this.map.on('load', () => {

        for (let item in this.geoJSON) {
          
          this.map.addSource('maine' + item, {
            'type': 'geojson',
            'data': {
              'type': 'Feature',
              'geometry': {
                'type': 'Polygon',
                
                'coordinates': [
                  this.geoJSON[item]
                ]
              }
            }
          });
          this.map.addLayer({
            'id': 'maine' + item,
            'type': 'fill',
            'source': 'maine' + item, 
            'layout': {},
            'paint': {
              'fill-color': this.colorList[item - 1], 
              'fill-opacity': 0.6
            }
          });
          
          this.map.addLayer({
            'id': 'outline' + item,
            'type': 'line',
            'source': 'maine' + item,
            'layout': {},
            'paint': {
              'line-color': '#258ff8',
              'line-width': 3
            }
          });
        }
        let that = this
        this.map.loadImage(
          require('../assets/images/绿色地标拷贝4@2x.png'),//添加的图片地址
          function (error, image) {

            if (error) throw error;
            // console.log(image)
            that.map.addImage('market1', image);
            // console.log(111)
            that.map.addSource('points', {
              'type': 'geojson',
              'data': {
                type: "FeatureCollection",
                name: "点位信息",
                features: [
                  {
                    'type': 'Feature',
                    'geometry': {
                      'type': 'Point',
                      'coordinates': [
                        116.47479873752598, 31.664560030480615
                      ]
                    },
                    'properties': {
                      'title': 'Mapbox DC1'
                    }
                  },
                ],
              },
            });
            that.map.addLayer({
              id: "points",
              type: "symbol",
              source: "points",
              layout: {
                "icon-image": 'market1',
                "text-field": ["get", "Name"],//此属性对应图标注释,必须拥有
                "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
                "text-offset": [0, 1.25],//设置图标与图标注相对之间的距离
                "text-anchor": "top",
                "icon-size": 0.5,//图标的大小
                // 跟随地图转动，推拉（3d效果那种）Mapbox 中叫 bearing 和 pitch
                'icon-rotation-alignment': 'map',
                'icon-allow-overlap': true,
                'icon-ignore-placement': true
              },
              paint: {
                "text-halo-color": "rgb(255,255,255)",
                "text-halo-width": 2,
              },
            });
          }
        )
        this.map.loadImage(
          require('../assets/images/黄色地标@2x.png'),//添加的图片地址
          function (error, image) {
            if (error) throw error;
            that.map.addImage('market2', image);
            that.map.addSource('points2', {
              'type': 'geojson',
              'data': {
                type: "FeatureCollection",
                name: "信息",
                features: [
                  {
                    // feature for Mapbox DC
                    'type': 'Feature',
                    'geometry': {
                      'type': 'Point',
                      'coordinates': [
                        116.47479873752598, 31.674560030480615
                      ]
                    },
                    'properties': {
                      'title': 'Mapbox DC2'
                    }
                  },
                ],
              },
            });
            that.map.addLayer({
              id: "points2",
              type: "symbol",
              source: "points2",
              layout: {
                "icon-image": 'market2',
                "text-field": ["get", "Name"],//此属性对应图标注释,必须拥有
                "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
                "text-offset": [0, 1.25],//设置图标与图标注相对之间的距离
                "text-anchor": "top",
                "icon-size": 0.5,//图标的大小
                // 跟随地图转动，推拉（3d效果那种）Mapbox 中叫 bearing 和 pitch
                'icon-rotation-alignment': 'map',
                'icon-allow-overlap': true,
                'icon-ignore-placement': true
              },
              paint: {
                "text-halo-color": "rgb(255,255,255)",
                "text-halo-width": 2,
              },
            });
          }
        )
        //热力图点位
        this.map.addSource('virus-source', {
          "type": "geojson",
          "data": require('../assets/data(1).json')
        });     
        this.map.addLayer(
          {
            id: "virus-heatmap",
            type: "heatmap",
            source: "virus-source",
            maxzoom: 24,
            layout: {
              'visibility': 'none'
            },
            paint: {
              "heatmap-weight": [
                "interpolate",
                ["linear"],
                ["get", "new_diagnosis"],
                0,
                1,
                1,
                1
              ],             
              'heatmap-intensity': {
                'stops': [
                  [11, 1],
                  [15, 3]
                ]
              },            
              "heatmap-color": [
                "interpolate",
                ["linear"],
                ["heatmap-density"],
                0,
                "rgba(0, 0, 0, 0)",
                0.1,
                "#927903",
                0.15,
                "#ffd403",
                1,
                "red"
              ],
              'heatmap-radius': {
                'stops': [
                  [11, 15],
                  [15, 20]
                ]
              },
              'heatmap-opacity': {
                'default': 1,
                'stops': [
                  [14, 1],
                  [15, 0]
                ]
              }             
            }
          },
        );

        this.map.addLayer(
          {
            'id': 'trees-point',
            'type': 'circle',
            'source': 'virus-source',
            // 'minzoom': 24,
            'layout': {
              'visibility': 'none'
            },
            'paint': {
              // increase the radius of the circle as the zoom level and dbh value increases
              'circle-radius': {
                'property': 'new_diagnosis',
                'type': 'exponential',
                'stops': [
                  [{ zoom: 15, value: 1 }, 5],
                  [{ zoom: 15, value: 62 }, 10],
                  [{ zoom: 22, value: 1 }, 20],
                  [{ zoom: 22, value: 62 }, 50]
                ]
              },
              // 'circle-radius':20,
              'circle-color': {
                'property': 'new_diagnosis',
                'type': 'exponential',
                'stops': [
                  [0, 'rgba(255,0,0,0.5)'],
                  [10, '#927903'],
                  [20, '#ffd403'],
                  [30, 'red'],
                  [40, 'red'],
                  [50, 'red'],
                  [60, 'red']
                ]
              },
              'circle-stroke-color': 'rgba(0, 0, 0, 0)',
              'circle-stroke-width': 0.2,
              'circle-opacity': {
                'stops': [
                  [14, 0],
                  [15, 1]
                ]
              }
            }
          }
        );
      });
    },
    changeArea(num) {
      this.map.setLayoutProperty('virus-heatmap', 'visibility', 'none')
      this.map.setLayoutProperty('trees-point', 'visibility', 'none')
      this.map.setLayoutProperty('points', 'visibility', 'visible')
      this.map.setLayoutProperty('points2', 'visibility', 'visible')
      if(this.map.getLayer('routeLayer1')){
        this.routeGeoJson.forEach((val,index)=>{
      this.map.setLayoutProperty('routeLayer'+(index+1), 'visibility', 'none')
        })
      }
      if (this.popup) {
        this.popup.remove()
      }
      for (let item in this.geoJSON) {
        if (this.map.getLayer('maine' + item)) {
          this.map.removeLayer('maine' + item);
          this.map.removeLayer('outline' + item);
          this.map.removeSource('maine' + item);
        }
      }
      if (num == 'all') {
        this.activeIndex = 1
        this.map.flyTo({
          center: [116.47479873752598, 31.664560030480615]
        });
        for (let item in this.geoJSON) {
          this.map.addSource('maine' + item, {
            'type': 'geojson',
            'data': {
              'type': 'Feature',
              'geometry': {
                'type': 'Polygon',
                'coordinates': [
                  this.geoJSON[item]
                ]
              }
            }
          });

          this.map.addLayer({
            'id': 'maine' + item,
            'type': 'fill',
            'source': 'maine' + item, // reference the data source
            'layout': {},
            'paint': {
              'fill-color': this.colorList[item - 1], // blue color fill
              'fill-opacity': 0.6
            }
          }, 'points');
          this.map.addLayer({
            'id': 'outline' + item,
            'type': 'line',
            'source': 'maine' + item,
            'layout': {},
            'paint': {
              'line-color': '#258ff8',
              'line-width': 3
            }
          }, 'points');
        }
      } else {
        this.map.flyTo({
          center: this.center[num]
        });
        this.map.addSource('maine' + num, {
          'type': 'geojson',
          'data': {
            'type': 'Feature',
            'geometry': {
              'type': 'Polygon',
              'coordinates': [
                this.geoJSON[num]
              ]
            }
          }
        });

        this.map.addLayer({
          'id': 'maine' + num,
          'type': 'fill',
          'source': 'maine' + num, // reference the data source
          'layout': {},
          'paint': {
            'fill-color': this.colorList[num - 1], // blue color fill
            'fill-opacity': 0.6
          }
        }, 'points');
        this.map.addLayer({
          'id': 'outline' + num,
          'type': 'line',
          'source': 'maine' + num,
          'layout': {},
          'paint': {
            'line-color': '#258ff8',
            'line-width': 3
          }
        }, 'points');
      }
    },
    getNowDate() {
      var date = new Date();
      let year = date.getFullYear() // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let hour = date.getHours(); // 时
      let minutes = date.getMinutes(); // 分
      let seconds = date.getSeconds() //秒
      let weekArr = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      let week = weekArr[date.getDay()];
      // 给一位数的数据前面加 “0”
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (day >= 0 && day <= 9) {
        day = "0" + day;
      }
      if (hour >= 0 && hour <= 9) {
        hour = "0" + hour;
      }
      if (minutes >= 0 && minutes <= 9) {
        minutes = "0" + minutes;
      }
      if (seconds >= 0 && seconds <= 9) {
        seconds = "0" + seconds;
      }
      this.date = `${year}年${month}月${day}日`
      this.week = week
      this.time = `${hour}h : ${minutes}m : ${seconds}s`
      // return year + "-" + month + "-" + day + " " + hour + sign2 + minutes + sign2 + seconds;
    },
    
    selectChange(val) {
      // console.log(val)
      let name = val.slice(-1)[0]
      
      switch (name) {
        case '片区1':
          this.changeArea('1')
          break
        case '片区2':
          this.changeArea('2')
          break
        case '片区3':
          this.changeArea('3')
          break
        case '片区4':
          this.changeArea('4')
          break
        case '片区5':
          this.changeArea('5')
          break
        case '片区6':
          this.changeArea('6')
          break
        case '事件热力图':
          this.addHetMap()
          break
        case '完成事件':
          this.addEventMarket()
          break
      }
    },
    //4大板块切换
    activeChange(index) {
      this.activeIndex = index
    },
    //事件热力图
    addHetMap() {
      this.map.setLayoutProperty('virus-heatmap', 'visibility', 'visible')
      this.map.setLayoutProperty('trees-point', 'visibility', 'visible')
      this.map.setLayoutProperty('points', 'visibility', 'none')
      this.map.setLayoutProperty('points2', 'visibility', 'none')
      this.currentMarkers.forEach(val=>{
        val.remove()
      })
      if(this.map.getLayer('routeLayer1')){
        this.routeGeoJson.forEach((val,index)=>{
      this.map.setLayoutProperty('routeLayer'+(index+1), 'visibility', 'none')
        })
      }
      if (this.popup) {
        this.popup.remove()
      }

      for (let item in this.geoJSON) {
        if (this.map.getLayer('maine' + item)) {
          this.map.setLayoutProperty('maine' + item, 'visibility', 'none')
          this.map.setLayoutProperty('outline' + item, 'visibility', 'none')
        }
      }
    },
    //完成事件
    addEventMarket() {
      this.map.setLayoutProperty('virus-heatmap', 'visibility', 'none')
      this.map.setLayoutProperty('trees-point', 'visibility', 'none')
      let coordinate = [116.47479873752598, 31.642560030480615]
      let el = document.createElement('div')
      el.className = 'marker'
      el.style.background = `url(${require('../assets/images/黄色地标@2x.png')})`
      el.style.backgroundSize = '100% 100%'
      el.style.width = 104 + 'px'
      el.style.height = 104 + 'px'
      el.style.borderRadius = '50%'
      let marker = new mapboxgl.Marker().setLngLat(coordinate)
        .setPopup(
          new mapboxgl.Popup({ offset: 25 }) // add popups
            .setHTML(
              `<div class="makerTop"><h3 class="markerHear" > 事件详情 </h3></div>
                            <div class="markerBody" >
                              <div>事件类型:偷运渣土</div>
                              <div>事件上报时间: 2023年2月8日</div>
                              <div>事件描述: 经举报，现场核实由于XX企业违规偷运渣土。</div>
                              <div>事件现场图片:
                                  <div class='imgbox'>
                                    <img src="" alt="">
                                    <img src="" alt="">
                                  </div>
                              </div>
                              <div>事件反馈结果: <br/>
                                XXX已在2023年2月8日去现场处置，已通知治安部门处置，处置已完成。
                                
                              </div>
                              <div class='btnBox'>
                                <div >范围选取</div>
                                <div class='addTrack'>处置轨迹</div>  
                              </div>
                            </div>`
            )
        )
        .addTo(this.map) // 将标记添加到地图上
      marker.getElement().addEventListener('click', () => {
        setTimeout(() => {
          console.log(document.querySelector('.addTrack'))
          document.querySelector('.addTrack').onclick = this.addTrack
        }, 500);

      });
      this.currentMarkers.push(marker)
    },
    //轨迹显示
    addTrack() {
      // console.log('aaaa')  
      this.map.setLayoutProperty('virus-heatmap', 'visibility', 'none')
      document.querySelector('.mapboxgl-popup').remove()
      this.map.setLayoutProperty('points', 'visibility', 'none')
      this.map.setLayoutProperty('points2', 'visibility', 'none')  
      for (let item in this.geoJSON) {
        if (this.map.getLayer('maine' + item)) {
          this.map.setLayoutProperty('maine' + item, 'visibility', 'none')
          this.map.setLayoutProperty('outline' + item, 'visibility', 'none')
        }
      }
      if (this.map.getLayer('routeLayer1')) {
        if(this.map.getLayer('routeLayer1')){
        this.routeGeoJson.forEach((val,index)=>{
      this.map.setLayoutProperty('routeLayer'+(index+1), 'visibility', 'visible')
        })
      }
        return
      }
      this.routeGeoJson = [{
        'type': 'FeatureCollection',
        'features': [{
          'type': 'Feature',
          'geometry': {
            'type': 'LineString',
            'coordinates': [
              [116.4737209127062, 31.682688232319734],
              [116.4486138583666, 31.68421847376297],
              [116.45087067179364, 31.684504175398198],          
            ]
          }
        }]
      },{
        'type': 'FeatureCollection',
        'features': [{
          'type': 'Feature',
          'geometry': {
            'type': 'LineString',
            'coordinates': [
              [116.45087067179364, 31.684504175398198],
              [116.42632594329486, 31.62247251114823],
              [116.41547848927785, 31.670326219538043],
              [116.4864644418418, 31.66655423008234],              
            ]
          }
        }]
      },{
        'type': 'FeatureCollection',
        'features': [{
          'type': 'Feature',
          'geometry': {
            'type': 'LineString',
            'coordinates': [
              [116.4864644418418, 31.66655423008234],
              [116.47450445981292, 31.646614896167772],
              [116.47446020920569, 31.678941925897732],
              [116.4737209127062, 31.682688232319734]
            ]
          }
        }]
      }]
      let colorList = ['#53Fddb','#aad72d','#295dd6']
      this.routeGeoJson.forEach((val,index)=>{
        console.log(val,index)
        console.log('index',index)
        this.map.addLayer({
        'id': 'routeLayer'+(index+1),
        'type': 'line',
        'source': {
          'type': 'geojson',
          'lineMetrics': true,
          'data': val
        },
        'paint': {
          'line-width': 5,
          'line-opacity': 1,
          'line-color': colorList[index],
          "line-dasharray": [0.5, 1]
        }
      });

      this.map.on('mouseover', 'routeLayer'+(index+1), (e) => {
        this.map.setPaintProperty('routeLayer'+(index+1),'line-width', 15)
        this.popup = new mapboxgl.Popup({
          offset: 25,
          closeButton: false
        }).setLngLat(val.features[0].geometry.coordinates[0]) // add popups
          .setHTML(
            `<div class="makerTop"><h3 class="markerHear" > 轨迹详情 </h3></div>
                            <div class="markerBody" >
                              <div>包保人: ${index}</div>
                              <div>处理事件类型: 偷运渣土</div>
                              <div>开始时间: 2023年2月8日16: 31分</div>
                              <div>结束时间: 2023年2月8日17: 57分</div>
                            </div>`
          ).addTo(this.map)     
      });
      this.map.on('mouseleave', 'routeLayer'+(index+1),(e)=>{      
      this.map.setPaintProperty('routeLayer'+(index+1),'line-width', 5)
      this.popup.remove()
      })
      })
    },
  }
}
</script>
<style scoped lang="scss">
li {
  list-style-type: none;
}

.container {
  width: 100%;
  height: 100vh;
  position: relative;
  #map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
  }

  .header {
    position: relative;
    width: 100%;
    height: 140px;
    background: url("../assets/images/一网统管系统@2x.png");
    background-size: 100% 100%;
    display: flex;
    justify-content: space-between;

    .timeBox {
      color: #fff;
      text-align: left;
      font-size: 12px;
      width: 50%;
      height: 35px;
      line-height: 35px;
      box-sizing: border-box;
      padding-left: 80px;

      span:nth-child(1) {
        margin-right: 20px;
      }

      span:nth-child(2) {
        margin-right: 40px;
      }
    }

    .info {
      height: 35px;
      display: flex;
      align-items: center;
      width: 60px;
      justify-content: space-between;
      margin-right: 100px;

      img {
        width: 15px;
        height: 15px;
      }
    }
  }

  .tool {
    float: left;
    width: 50px;
    height: 100px;
    position: relative;
    z-index: 999;
    // background: rgba($color: #081c54, $alpha: 0.5);
    background: url('../assets/images/矩形579拷贝14@2x.png');
    background-size: 100% 100%;
    margin-top: -58px;
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    img {
      width: 25px;
      height: 25px;

    }

  }

  .search-box {
    float: right;
    position: relative;
    z-index: 999;
    margin-right: 15px;
    margin-top: -58px;

    #mySelect {
      width: 100px;
      height: 35px;
      background-color: rgba($color: #000000, $alpha: 0);
      color: #b9c9e0;
      border: 1px solid #0800fe;
      outline: none;

    }

    .blue {
      background-color: rgb(175, 175, 233) !important;

      color: #b9c9e0;
    }

    input {
      width: 160px;
      height: 33px;
      color: #b9c9e0;
      background-color: rgba($color: #000000, $alpha: 0);
      outline: none;
      border: 1px solid #0800fe;
      padding-left: 4px;
    }

    input::-webkit-input-placeholder {
      color: #b9c9e0;
      font-size: 12px;
    }

    .search {
      position: relative;
      height: 35px;
      display: inline-block;

      img {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
      }
    }
  }

  .btn {
    position: absolute;
    bottom: 30px;
    width: 100%;
    display: flex;
    justify-content: center;

    .btn-list {
      display: flex;

      color: #fff;
      cursor: pointer;
    }

    .btn-list li {
      // margin-right: 15px;
      width: 170px;
      height: 84px;
      background: url("../assets/images/组22灰大素材@2x.png");
      background-size: 100% 100%;
      line-height: 90px;
    }

    .btn-list li:first-child {
      width: 170px;
      height: 84px;
    }
  }
}
</style>
<style lang="scss">
@import url("https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css");

.mapboxgl-popup {
  background: rgba($color: #000000, $alpha: 0.3);
}

.mapboxgl-popup-tip {
  display: none;
  background-color: rgba($color: #000000, $alpha: 0.3);
}

.mapboxgl-popup-content {
  background-color: rgba($color: #000000, $alpha: 0.3);
  color: #fff;
}

.el-popover.el-popper {
  width: auto !important;
  border: none;
  background: rgba($color: #000000, $alpha: 0) !important;

  .el-cascader-panel {
    background: rgba($color: #000000, $alpha: 0);

    .el-cascader-node:not(.is-disabled):focus,
    .el-cascader-node:not(.is-disabled):hover {
      background: #0c4395;
    }

    .el-cascader-node__label {
      color: #fff;
    }

  }
}

.mapboxgl-popup-content {
  background:rgba(8, 0, 76, 0.5);
  .markerBody {
    text-align: left !important;
    

    .imgbox {
      display: flex;
      justify-content: space-between;

      img {
        width: 40%;
        height: 80px;
      }
    }

    .btnBox {


      display: flex;
      justify-content: space-around;

      div {
        color: #fff;
        width: 120px;
        height: 45px;
        text-align: center;
        line-height: 45px;
        border-radius: 8px;
      }

      div:first-child {
        background: #38bee0;
      }

      div:last-child {
        background: #18ba6c;
      }
    }

  }

  .mapboxgl-popup-close-button {
    color: #fff;
    font-size: 25px;
  }
}
</style>
